<template>
  <div>
    <div class="list-btn">
      标题:<Input v-model.trim="params.title" placeholder="请输入标题" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
     <div class="list-btn">
      状态:
      <Select clearable style="width:200px" v-model="params.deleted" placeholder="请选择" @on-change="get(params.status)">
        <Option  :value="1">上架</Option>
        <Option  :value="2">下架</Option>
      </Select>
    </div>
    <div class="list-btn">
      修改时间:
      <DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px"  ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button
        type="primary"
        @click="resetValidate();
        showModal = true;
        title = '新增公告';
        formRole = {};
        status = false;
        type = '增加';
        ">
       新增公告
      </Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>

    <!--编辑新增通知-->
    <Modal
      v-model="showModal"
      :title="title"
      width="600"
      :closable="true"
      :style="{textAlign:'left'}">
      <Form ref="formRole" :rules="ruleValidate" :model="formRole" :label-width="80">
        <FormItem label="标题" prop="title" >
          <Input v-model="formRole.title" placeholder="请输入" :disabled="status" style="width:200px"></Input>
        </FormItem>
        <FormItem label="内容" prop="content" >
          <Input v-model="formRole.content" type="textarea" :disabled="status" placeholder="请输入" style="width:420px"></Input>
        </FormItem>
        <FormItem label="商户" prop="merchantId">
          <Select clearable v-model="formRole.merchantId" placeholder="请选择" style="width:200px" :disabled="status">
            <Option v-for="(item) in merchantList" :value=item.id :key="item.id">{{item.merchantName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="状态" prop="deleted" >
          <Select clearable  v-model="formRole.deleted" style="width:200px" :disabled="status">
            <Option
              v-for="item in statusList"
              :value=item.id
              :key="item.id"
            >{{ item.name}}
            </Option>
          </Select>
        </FormItem>
       <div style='margin-left:370px' v-if="!status">
          <Button @click="cancel" style="margin-right:5px">取消</Button>
          <Button type="primary" @click="ok">确定</Button>
        </div>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import common from '../../mixin/common'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin,common],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {
        tag: {
          'title': '公告管理',
          'path': '/work/notice/list'
        },
        showModal:false,
        title:'',
        status:false,
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
        url:'/bkannouncement/list',
       listTitle: [
        {
          title: "公告标题",
          key: "title",
          align:"center",
          minWidth:160,
        },
         {
          title: "商户名称",
          key: "merchantId",
          align:"center",
          minWidth:160,
          render:(h,params) => {
            let text = '';
            switch (params.row.merchantId){
              case 1:
                text = '易宝';
                break;
            }
            return h('div',text)
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth:180,
          align: "center",
          loading:false,
          render:(h,params) => {
            return h('div',this.getLocalTime(params.row.createTime))
          }
        },
        {
          title: "修改时间",
          key: "updateTime",
          minWidth:180,
          align: "center",
          render:(h,params) => {
            return h('div',params.row.updateTime ? this.getLocalTime(params.row.updateTime) : '—')
          }
        },
        {
          title: "状态",
          key: "deleted",
          minWidth:200,
          align: "center",
          render:(h,params) =>{
            let status = '';
            let btnType = '';
            switch (params.row.deleted){
              case 2 :
                status = '已下架';
                btnType = 'error';
                break;
              case 1:
                status = '已上架';
                btnType = 'success';
                break;
            }
            return h('Button',{
              props: {
                type: btnType,
                size: 'small'
              }
            }, status)
          }
        },
        {
          title: "操作",
          key: "action",
          minWidth:240,
          align:'center',
          render: (h, params) => {
            let btnType = "";
            let display =''
            if(params.row.deleted == 1){
              btnType = '下架';
              display = 'none' //发布
            }else if(params.row.deleted == 2){
              btnType ='上架';
              display = 'inline-block' //下架
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginRight: "6px"
                  },
                  on: {
                    click: () => {
                     this.type = '预览';
                     this.title="预览公告";
                     this.resetValidate();
                     this.status = true;
                     this.showModal = true;
                     this.formRole = JSON.parse(JSON.stringify(params.row));
                    }
                  }
                },
                "预览"
              ),
               h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginRight: "6px",
                    display: display
                  },
                  on: {
                    click: () => {
                      this.type = '编辑';
                      this.title="编辑公告";
                      this.resetValidate();
                      this.showModal = true;

                      this.status = false;
                      this.formRole = JSON.parse(JSON.stringify(params.row));
                    }
                  }
                },
                '编辑'
              ),
                h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",

                  },
                  style: {
                    marginRight: "6px",
                  },
                  on: {
                    click: () => {
                        this.$Modal.confirm({
                        title: '提示',
                        content: `<p>确定要${btnType}吗?</p>`,
                        onOk: () => {
                          let deleted = '';
                          if(params.row.deleted == 1){
                            deleted = 2
                          }else {
                            deleted = 1
                          }
                           let data = {
                            title: params.row.title,
                            content:params.row.content,
                            id:params.row.id,
                            merchantId:params.row.merchantId,
                            deleted:deleted,
                         };
                           this.$post('/bkannouncement/modify', data)
                            .then((res) => {
                              if(res.code === 0){
                                console.log(res,'edit')
                                this.$Message.success(`${btnType}成功！`);
                                this.getList(this.url);
                              }
                            }, (err) => {
                              console.log(err);
                            })
                        },
                        onCancel: () => {
                        }
                      });

                    }
                  }
                },
                btnType
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",

                  },
                  style: {
                    display:display
                  },
                  on: {
                    click: () => {
                        this.$Modal.confirm({
                        title: '提示',
                        content: `<p>是否删除该通知?</p>`,
                        onOk: () => {
                          this.delItem('/bkannouncement/discard',{id:params.row.id})
                        },
                        onCancel: () => {
                        }
                      });

                    }
                  }
                },
                "删除"
              ),

            ]);
          }
        }
      ],
        formRole: {

        },
        statusList:[
          {
            id:1,
            name:'上架'
          },
          {
            id:2,
            name:'下架 '
          }
        ],
        ruleValidate: {
          title: [
            { required: true, message: '请填写通知标题', trigger: 'blur' }

          ],
          content: [
            { required: true, message: '请填写通知内容', trigger: 'blur' }
          ],
          merchantId : [
            { required: true, message: '请选择商户', trigger: 'blur' ,type:'number'}
          ],
          deleted: [
            { required: true, message: '请选择状态', trigger: 'blur' ,type:'number'}
          ],
        },
        type:'编辑',
      }
    },
    mounted() {

    },
    methods: {

      resetValidate() { //清空判断
        this.$refs['formRole'].resetFields();
      },
      ok() { //确定
        let url = '';
        this.$refs['formRole'].validate((valid) => {
          if (valid) {
            let data = {
              title: this.formRole.title,
              content: this.formRole.content,
              id:this.formRole.id,
              merchantId:this.formRole.merchantId,
              deleted:this.formRole.deleted,
            };
            if(this.type == '增加'){
              url = '/bkannouncement/append';
            }else if(this.type == '编辑'){
              url = '/bkannouncement/modify';
            }
            this.$post(url, data)
              .then((res) => {
                if(res.code === 0){
                  console.log(res,'edit')
                  this.showModal = false;
                  this.$Message.success(`${this.type}成功！`);
                  this.getList(this.url);
                }
              }, (err) => {
                console.log(err);
              })
          }
        })
      },
      cancel() { //取消

        this.showModal = false;
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
   margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
/deep/ .ivu-modal-footer{
  display: none;
}
/deep/ textarea.ivu-input{
  height:260px;
}
</style>
